<!--
* @description  : 案件-当场处罚缴纳罚款委托书文书
* @descriptionDetail: 案件-当场处罚缴纳罚款委托书文书
* @copyright    : 浙江烟草
* @author       : sy
* @create       : 2022-08-29 15:43:11
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="theme-color" @click="printOrDown(state.canEdit)">
        {{ state.canEdit?'预览':'打印' }}
      </view>
    </theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="state.canEdit?fContent:fContents" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="main-content">
      <view class="main-title">
        当场处罚缴纳罚款委托书
      </view>
      <u-form :model="docLocalePunForm" :error-type="errorType" :rules="rules" class="form-content" ref="uForm">
        <u-form-item label="被委托机构" :required="true" :label-width="labelWidth" prop="orgShortname">
          <u-input placeholder="请输入" input-align="right" :disabled="!state.canEdit" v-model="docLocalePunForm.orgShortname" />
        </u-form-item>
        <u-form-item label="处罚文书编号" :required="true" :label-width="labelWidth" prop="decideDocNo">
          <u-input placeholder="请输入" input-align="right" :disabled="!state.canEdit" v-model="docLocalePunForm.decideDocNo" />
        </u-form-item>
        <u-form-item label="处罚日期" :label-width="labelWidth" :required="true" right-icon="arrow-right" prop="punishDecideDate" ref="datePunChangeRef">
          <u-input :disabled="true" input-align="right" placeholder="请选择日期" v-model="docLocalePunForm.punishDecideDate" @click="()=>{if(state.canEdit) clicDatekHandle('isShowPunDate')}" />
        </u-form-item>
        <u-form-item label="文书日期" :label-width="labelWidth" :required="true" right-icon="arrow-right" prop="docDate" ref="dateChangeRef">
          <u-input :disabled="true" input-align="right" placeholder="请选择日期" v-model="docLocalePunForm.docDate" @click="()=>{if(state.canEdit) clicDatekHandle('isShowDocDate')}" />
        </u-form-item>
      </u-form>
      <view class="bottom-btn-info" v-if="state.canEdit">
        <u-row gutter="16">
          <u-col span="6">
            <u-button plain type="primary" @click="saveOrSubmit('save')">
              保存
            </u-button>
          </u-col>
          <u-col span="6">
            <u-button type="primary" @click="saveOrSubmit('submit')">
              提交
            </u-button>
          </u-col>
        </u-row>
      </view>
      <u-calendar :mode="mode" :max-date="maxDate" v-model="isShowPunDate" @change="changeDate('punishDecideDate',$event)">
      </u-calendar>
      <u-calendar :mode="mode" :max-date="maxDate" v-model="isShowDocDate" @change="changeDate('docDate',$event)">
      </u-calendar>
    </view>
  </view>
</template>

<script>
	import caseCommon from "../caseCommonMixin.js";
	import officeService from "@/service/case/office.service.js";
	import {
		dateUtils,
	} from "@/common/util";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			fabButton
		},
		mixins: [caseCommon, ],
		data() {
			return {
				errorType: ['border-bottom', 'message', ],
				labelPosition: "top",
				labelWidth: '280',
				docLocalePunForm: {},
				caseParam: {}, // 上个页面传过来的参数
				isShowPunDate: false,
				isShowDocDate: false,
				mode: 'date',
				maxDate: '2099-12-31',
				doc: {},
				rules: {
					// 被委托机构
					orgShortname: [{
						required: true,
						message: '请填写被委托机构',
						trigger: ['change', 'blur', ],
					}, ],
					// 处罚文书编号
					decideDocNo: [{
						required: true,
						message: '请填写处罚文书编号',
						trigger: ['change', 'blur', ],
					}, ],
					// 处罚日期
					punishDecideDate: [{
						required: true,
						message: '请选择日期',
						trigger: ['change', 'blur', ],
					}, ],
					// 文书日期
					docDate: [{
						required: true,
						message: '请选择日期',
						trigger: ['change', 'blur', ],
					}]
				},
        fContent: [{
          iconPath: require('@/static/oview.png'),
          selectedIconPath: require('@/static/oview.png'),
          text: '预览',
          active: false,
        }],
        fContents: [{
          iconPath: require('@/static/dy.png'),
          selectedIconPath: require('@/static/dy.png'),
          text: '打印',
          active: false,
        }],
			}
		},
		watch: {
			isShowPunDate() {
				this.$refs.datePunChangeRef.validation();
			},
			isShowDocDate() {
				this.$refs.dateChangeRef.validation();
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(preParams) {
			this.caseParam = this.getRouteParam();
		},
		mounted() {
			this.docStep((docInfo) => {
				this.doc = docInfo;
				this.setRightBtns();
			});
			this.initDocData();
		},
		methods: {
			initDocData() {
				let parms = {
					id: this.caseParam.id,
					docUuid: this.caseParam.docUuid,
					bizUuid: this.caseParam.bizUuid,
				}
				this.$modal.showLoading('加载中');
				officeService.getDocLocalePunish(parms).then((res) => {
					this.$modal.hideLoading();
					let [tiInfo, rs, ] = [{}, {}, ];
					if (res.success && res.data.length === 2) {
						tiInfo = res.data[0];
						rs = res.data[1];
						Object.keys(tiInfo).forEach(key => {
							rs[key] = tiInfo[key];
						});
					} else {
						rs = res.data[0];
					}
					this.docLocalePunForm = rs;
				})
			},
			// 设置右侧标题
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight(this.state.canEdit ? '预览' : '打印', () => {
					this.printOrDown(this.state.canEdit);
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.printOrDown(this.state.canEdit);
				}
			},
			// 打印/预览
			printOrDown(flag) {
				if (flag) {
					// 调接口预览
					this.submitDocInfo('preview');
				} else {
					this.downloadFile(this.doc.pdfFileId);
				}
			},
			downloadFile(fileId, titleName, isDownload) {
				let pdfIds = fileId;
				if (!pdfIds) {
					this.$u.toast("没有文书");
					return;
				}
				this.setRouteParam({
					fileId: pdfIds,
					fileName: titleName,
					isDownload: isDownload,
				});
				this.$u.route('pages/commonPage/printerComponent');
			},
			clicDatekHandle(type) {
				this[type] = true;
			},
			changeDate(type, e) {
				this.docLocalePunForm[type] = dateUtils.dateFormat("yyyy年MM月dd日", new Date(e.result));
			},
			// 表单验证
			validForm() {
				let basicValid = false;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						basicValid = true;
						console.log('表单验证通过');
					} else {
						basicValid = false;
						console.log('表单验证失败');
					}
				});
				return basicValid;
			},
			// 点击提交、保存按钮
			saveOrSubmit(type) {
				// 验证表单
				let flag = this.validForm();
				if (flag) {
					if (type == 'submit') {
						this.$modal.confirm("完成后不可修改，请确认是否填写完整准确无误？", () => {
							this.submitDocInfo(type);
						});
					} else {
						this.submitDocInfo(type);
					}
				}
			},
			// 调用保存、提交接口
			submitDocInfo(type) {
				// 保存/提交
				let {
					id,
					docUuid,
					titemUuid,
				} = this.caseParam;
				this.docLocalePunForm.caseUuid = this.caseParam.caseUuid;
				this.docLocalePunForm.finshStatus = "1";
				// 先保存
				type == 'save' && this.$u.loading('数据保存中...');
				officeService.saveDocLocalePunish(this.docLocalePunForm, docUuid, titemUuid, id, this.caseParam.type).then(res => {
					this.$u.hideLoading();
					if (res.success) {
						this.docLocalePunForm = res.bean;
						try {
							if (!this.doc) this.doc = res.data[0];
						} catch (e) {
							console.log(e);
						}
						if (type == 'submit') {
							this.docLocalePunForm.finshStatus = "9";
							this.$u.loading('数据提交中...');
							officeService.submitDocLocalePunish(this.docLocalePunForm, docUuid, titemUuid, id, this.caseParam.type).then(res => {
								this.$u.hideLoading();
								this.saveBehaviorLog(1, this.caseParam, this.doc);
								this.$u.toast(res.msg);
								if (res.success) {
									this.backPrev({
										paramKey: "offiList",
										param: {
											caseUuid: this.caseParam.bizUuid,
											caseCode: this.caseParam.caseCode,
											caseType: this.caseParam.caseType,
										},
									});
								}
							})
						} else if (type == 'preview') {
							officeService.buildLocalPunish("/payment/doc-entrust", this.doc.docInsUuid).then(pdfId => {
								if (pdfId.success) {
									this.downloadFile(pdfId.bean, "预览", false);
								} else {
									this.$u.toast(pdfId.msg);
								}
							});
						} else {
							this.saveBehaviorLog(0, this.caseParam, this.doc);
							this.$u.toast(res.msg);
						}
					} else {
						this.$u.hideLoading();
						this.$u.toast(res.msg);
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "../case_common.scss";
</style>
